<template>
  <button @click="clickHandler" :disabled="disabled" :class="btnClassName">
    <span v-if="icon" :class="iBoxClassName">
      <i :class="iClassName"/>
    </span>
    <span v-if="$slots.default"><slot/></span>
  </button>
</template>
<script>
export default {
  name: "XButton",
  props: {
    type: String,
    size: String,
    icon: String,
    disabled: Boolean,
    outlined: Boolean,
    loading: Boolean
  },
  computed: {
    btnClassName() {
      const className = ["button"];
      if (this.type) className.push(`is-${this.type}`);
      if (this.size) className.push(`is-${this.size}`);
      if (this.loading) className.push("is-loading");
      if (this.outlined) className.push("is-outlined");
      return className;
    },
    iBoxClassName() {
      const className = ["icon"];
      if (this.size) className.push(`is-${this.size}`);
      return className;
    },
    iClassName() {
      const className = ["fa"];
      if (this.icon) {
        this.icon.split(" ").forEach(v => {
          if (v) className.push(`fa-${v}`);
        });
      }
      return className;
    }
  },
  methods: {
    clickHandler(e) {
      this.$emit("click", e);
    }
  }
};
</script>
